<template>
  <div class="article-item-container">
    <div class="content-container" :class="isLeft ? 'left': 'right'">
      <div class="published-time">
        <span class="iconfont icon-time"></span>
        发布于{{ postObj.publishedTime }}
      </div>
      <router-link class="main-title" :to="articleUrl">
        <h3>{{ postObj.title }}</h3>
      </router-link>
      <div class="article-meta">
        <template v-for="{ metaIcon,metaOption } in metaList">
          <router-link :to="articleUrl">
            <i class="iconfont meta-icon" :class="metaIcon"></i>
            <span v-if="metaOption !== '分享'" class="meta-icon">{{
                metaOption
              }}{{ metaOption === '浏览量' ? postObj.viewCount : postObj.commentCount }}</span>
            <span v-else class="meta-icon"> {{ metaOption }} </span>
          </router-link>
        </template>
      </div>
      <p class="description"> {{ postObj.summary }} </p>
      <router-link :to="articleUrl">
        <span class="smaller"><i class="iconfont icon-read-more"></i></span>
      </router-link>
    </div>
    <router-link :to="articleUrl" class="picture-container" :class="!isLeft ? 'left': 'right'">
      <img :src="postObj.imgUrl.includes('http') ? postObj.imgUrl :'http://www.hyhwky.com:3000'+ postObj.imgUrl"
           alt="">
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'articleItem',
  data () {
    return {
      publishedTime: '2020-10-20',
      metaList: [
        {
          metaIcon: 'icon-eye',
          metaOption: '浏览量',
          metaData: '999',
          metaUrl: '123'
        },
        {
          metaIcon: 'icon-msg',
          metaOption: '评论',
          metaData: '999',
          metaUrl: 'metaUrl'
        },
        {
          metaIcon: 'icon-area',
          metaOption: '分享',
          metaData: '',
          metaUrl: 'metaUrl'
        }

      ]
    }
  },
  props: {
    isLeft: {
      type: Boolean,
      default () {
        return false
      }
    },
    postObj: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    articleUrl () { return '/post/' + this.postObj.postId }
  }
}
</script>

<style scoped lang="scss">
.article-item-container {
  transition: all 0.5s;

  &:hover {
    -moz-box-shadow: 3px 2px 9px #333333;
    -webkit-box-shadow: 3px 2px 9px #333333;
    box-shadow: 3px 2px 9px #333333;
    transform: translate(0, -10px);
    transition: all 0.5s;
  }

  background-color: #fff;
  margin: 30px auto 0;
  width: 98%;
  height: 300px;
  border-radius: 10px;
  position: relative;

  .picture-container {
    overflow: hidden;
    width: 430px;
    height: 100%;
    cursor: pointer;
    object-fit: cover;

    position: absolute;

    img {
      border-radius: 10px;
      overflow: hidden;
      width: 430px;
      height: 300px;
      top: 0;
      position: relative;
      left: 0;
      -webkit-transition: -webkit-transform 0.3s;
      -moz-transition: -moz-transform 0.3s;
      -o-transition: -o-transform 0.3s;
      transition: transform 0.3s;

      &:hover {
        transform: scale(1.3);
        transition: all 0.75s;
      }
    }


  }

  .content-container {
    width: calc(100% - 430px);
    position: absolute;
    padding-left: 15px;
    padding-top: 20px;

    .published-time {
      color: #666666;
      font-size: 14px;
    }

    .main-title {
      text-align: center;
      margin-top: 20px;
      display: block;
    }

    .article-meta {
      margin: 0 auto;
      width: 90%;
      display: flex;
      justify-content: space-between;
      padding: 5px 0 15px 0;

      .meta-icon {
        padding-right: 8px;
        color: rgba(0, 0, 0, .5);
      }

    }

    .smaller {
      padding-top: 12px;
      margin-left: 15px;
      width: 50px;
      display: block;
      height: 50px;

      .iconfont {
        &:hover {
          font-size: 10px;
          color: #fe9600;
        }
      }
    }

    p {
      width: 90%;
      margin: 0 auto;
      font-size: 18px;
      line-height: 24px;
      overflow: hidden;
      text-align: justify;
      text-overflow: ellipsis;
      display: -webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp: 3; //显示的行
      color: #7d7d7d;
    }

  }

}

.left {
  left: 0;
}

.right {
  right: 0;
}

</style>